<!-- 文章发布 - 基础设置 -->
<template>
  <el-form ref="formRef" :disabled="isDetail" :model="formData" :rules="rules" label-width="120px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="文章名称" prop="name">
          <el-input
            v-model="formData.name"
            :clearable="true"
            :show-word-limit="true"
            class="w-80!"
            maxlength="64"
            placeholder="请输入文章名称"

          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="文章作者" prop="author">
          <el-input
            v-model="formData.author"
            :clearable="true"
            :show-word-limit="true"
            class="w-80!"
            maxlength="64"
            placeholder="请输入文章作者"

          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="文章分类" prop="categoryId">
          <el-cascader
            v-model="formData.categoryId"
            :options="categoryList"
            :props="defaultProps"
            class="w-80"
            clearable
            filterable
            placeholder="请选择文章分类"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="formData.sort"
            :min="0"
            placeholder="请输入排序"
            class="w-80!"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="文章简介" prop="introduction">
          <el-input
            v-model="formData.introduction"
            :autosize="{ minRows: 2, maxRows: 2 }"
            :clearable="true"
            :show-word-limit="true"
            class="w-80!"
            maxlength="128"
            placeholder="请输入文章简介"
            type="textarea"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="文章封面图" prop="picUrl">
          <UploadImg v-model="formData.picUrl" :disabled="isDetail" height="80px" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="文章轮播图" prop="sliderPicUrls">
          <UploadImgs v-model="formData.sliderPicUrls" :disabled="isDetail" />
        </el-form-item>
      </el-col>

    </el-row>






  </el-form>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { copyValueToTarget } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import { defaultProps, handleTree } from '@/utils/tree'
import type { Article } from '@/api/portal/mharticle/index'
import {MhCategoryApi} from '@/api/portal/mhcategory'
import { CategoryVO } from '@/api/mall/product/category'
import * as ProductBrandApi from '@/api/mall/product/brand'
import { BrandVO } from '@/api/mall/product/brand'

defineOptions({ name: 'ProductSpuInfoForm' })
const props = defineProps({
  propFormData: {
    type: Object as PropType<Article>,
    default: () => {}
  },
  isDetail: propTypes.bool.def(false) // 是否作为详情组件
})

const message = useMessage() // 消息弹窗

const formRef = ref() // 表单 Ref
const formData = reactive<Article>({
  name: '', // 文章名称
  categoryId: undefined, // 文章分类
  keyword: '', // 关键字
  picUrl: '', // 文章封面图
  sliderPicUrls: [], // 文章轮播图
  introduction: '', // 文章简介
  author: '', // 作者
  sort: 0, // 排序
  brandId: undefined // 文章品牌
})
const rules = reactive({
  name: [required],
  categoryId: [required],
  introduction: [required],
  // picUrl: [required],
  // sliderPicUrls: [required],
})

/** 将传进来的值赋值给 formData */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) {
      return
    }
    copyValueToTarget(formData, data)
  },
  {
    immediate: true
  }
)

/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
  if (!formRef) return
  try {
    await unref(formRef)?.validate()
    // 校验通过更新数据
    Object.assign(props.propFormData, formData)
  } catch (e) {
    message.error('【基础设置】不完善，请填写相关信息')
    emit('update:activeName', 'info')
    throw e // 目的截断之后的校验
  }
}
defineExpose({ validate })

/** 初始化 */
const brandList = ref<BrandVO[]>([]) // 文章品牌列表
const categoryList = ref<CategoryVO[]>([]) // 文章分类树
onMounted(async () => {
  // 获得分类树
  const data = await MhCategoryApi.getCategoryList({})
  categoryList.value = handleTree(data, 'id')
  // 获取文章品牌列表
  brandList.value = await ProductBrandApi.getSimpleBrandList()
})
</script>
